<template>
  <v-chart
    ref="chartRef"
    :option="chartOptions"
    autoresize
    class="chart-container"
  />
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { use } from 'echarts/core';
import VChart from 'vue-echarts';
import { CanvasRenderer } from 'echarts/renderers';
import { ScatterChart } from 'echarts/charts';
import 'echarts-extension-amap';
import { TooltipComponent, GridComponent, LegendComponent } from 'echarts/components';

// 注册 ECharts 组件和高德地图扩展
use([
  CanvasRenderer,
  ScatterChart,
  TooltipComponent,
  GridComponent,
  LegendComponent,
]);

const props = defineProps<{
  officers: any[];
  incidents: any[];
}>();

const chartRef = ref();

// 将原始数据处理为 ECharts 需要的格式
const createSeriesData = (data: any[], type: 'officer' | 'incident') => {
  return data.map(item => {
    const name = type === 'officer'
      ? `${item.name} (${item.statusDescription})`
      : `事件: ${item.incidentType} - ${item.location}`;

    return {
      name: name,
      value: [item.lng, item.lat],
      itemStyle: {
        color: type === 'officer' ? '#0d6efd' : '#dc3545'
      },
      // 自定义属性，用于区分类型和样式
      itemType: type,
      status: item.statusDescription
    };
  });
};

const chartOptions = computed(() => {
  const officerData = createSeriesData(props.officers, 'officer');
  const incidentData = createSeriesData(props.incidents, 'incident');

  return {
    // 高德地图配置
    amap: {
      key: 'e67f0e9520643f148baa0e9747a27038',
      center: [84.88, 45.58],
      zoom: 12,
      viewMode: '2D',
      mapStyle: 'amap://styles/whitesmoke',
      // 确保地图移动时标记跟随
      renderOnMoving: true,
      echartsLayerZIndex: 2000,
    },
    // 提示框组件
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(255, 255, 255, 0.9)',
      borderColor: '#ddd',
      borderWidth: 1,
      textStyle: {
        color: '#333'
      },
      formatter: function(params: any) {
        const data = params.data;
        return `<div style="font-weight: bold; color: ${data.itemStyle.color}">${data.name}</div>`;
      }
    },
    // 图例
    legend: {
      show: true,
      data: ['警员', '事件'],
      bottom: 10,
      left: 'center',
      itemWidth: 12,
      itemHeight: 12,
      textStyle: {
        color: '#666'
      }
    },
    // 系列配置
    series: [
      // 警员系列
      {
        name: '警员',
        type: 'scatter',
        coordinateSystem: 'amap',
        data: officerData,
        symbolSize: 24,
        zlevel: 10,
        label: {
          show: true,
          position: 'top',
          distance: 10,
          formatter: '{b}',
          color: '#333',
          backgroundColor: 'rgba(255, 255, 255, 0.9)',
          borderRadius: 4,
          padding: [4, 8],
          borderColor: '#ddd',
          borderWidth: 1,
          shadowBlur: 5,
          shadowColor: 'rgba(0, 0, 0, 0.1)',
          fontSize: 12,
          fontWeight: 'normal',
          // 标签动画
          emphasis: {
            show: true,
            fontSize: 13,
            fontWeight: 'bold',
            color: '#0d6efd',
            transitionDuration: 300
          }
        },
        // 自定义符号
        symbol: function(dataItem: any) {
          const status = dataItem.status;
          // 根据状态返回不同的图标
          if (status === '在岗') {
            return 'path://M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z';
          } else {
            return 'path://M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z';
          }
        },
        itemStyle: {
          color: function(params: any) {
            const status = params.data.status;
            return status === '在岗' ? '#198754' : '#dc3545';
          },
          shadowBlur: 10,
          shadowColor: 'rgba(0, 0, 0, 0.3)',
          shadowOffsetY: 3
        },
        // 动画效果
        animationDuration: 1000,
        animationEasing: 'elasticOut',
        animationDelay: function(idx: number) {
          return idx * 100;
        }
      },
      // 事件系列
      {
        name: '事件',
        type: 'scatter',
        coordinateSystem: 'amap',
        data: incidentData,
        symbolSize: 30,
        zlevel: 11,
        label: {
          show: true,
          position: 'top',
          distance: 12,
          formatter: '{b}',
          color: '#fff',
          backgroundColor: 'rgba(220, 53, 69, 0.9)',
          borderRadius: 4,
          padding: [4, 8],
          borderColor: 'rgba(220, 53, 69, 1)',
          borderWidth: 1,
          shadowBlur: 5,
          shadowColor: 'rgba(0, 0, 0, 0.2)',
          fontSize: 12,
          fontWeight: 'normal',
          // 标签动画
          emphasis: {
            show: true,
            fontSize: 13,
            fontWeight: 'bold',
            color: '#fff',
            transitionDuration: 300
          }
        },
        // 自定义符号
        symbol: 'path://M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z',
        itemStyle: {
          color: '#dc3545',
          shadowBlur: 15,
          shadowColor: 'rgba(220, 53, 69, 0.5)',
          shadowOffsetY: 5
        },
        // 事件标记的特殊效果
        emphasis: {
          itemStyle: {
            color: '#f32c3d',
            shadowBlur: 20,
            shadowColor: 'rgba(243, 44, 61, 0.7)'
          },
          symbolSize: 35,
          transitionDuration: 300
        },
        // 动画效果
        animationDuration: 1200,
        animationEasing: 'elasticOut',
        animationDelay: function(idx: number) {
          return idx * 100 + 500;
        }
      }
    ]
  };
});

// 暴露地图实例的方法，以便父组件调用
const getMapInstance = () => chartRef.value?.getChart().getModel().getComponent('amap').getAMap();
defineExpose({
  zoomIn: () => getMapInstance()?.zoomIn(),
  zoomOut: () => getMapInstance()?.zoomOut(),
  refresh: () => chartRef.value?.getChart().setOption(chartOptions.value, true),
  panTo: (lng: number, lat: number) => {
    const map = getMapInstance();
    if (map) {
      map.panTo([lng, lat]);
      map.setZoom(15);
    }
  }
});
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 100%;
}
</style>
